<template>
    <div id="box">
        <span style="font-size: 22px;color: #333;">预约信息</span><br>
        <span style="color: #999;font-size: 15px;border-bottom: 3px solid red;padding-bottom: 10px;">
            Reservation information
        </span>
    </div>

    <div style="width: 1200px; height: 500px;   margin: 50px auto;">
        <el-card>
            <template #header>未预约记录</template>
            <el-table :data="recordInfo" height="400" style="width: 100%">
                <el-table-column prop="id" label="订单编号" width="100" />
                <el-table-column prop="time" label="预约时间" width="120" />
                <el-table-column prop="userName" label="用户名" width="100" />
                <el-table-column prop="styleName" label="妆造风格" width="300" />
                <el-table-column prop="photoName" label="摄影师名称" />
                <el-table-column prop="makeName" label="妆造师名称" />
                <el-table-column prop="state" label="状态" />

                <el-table-column label="操作" width="200">
                    <template #default="scope">
                        <el-button plain :type="btnColor(scope.row.state)" :disabled="btnClick(scope.row.state)"
                            @click="updateState(scope.row.id)">
                            预约
                        </el-button>
                    </template>
                </el-table-column>

                <!-- 空 -->
                <template #empty>
                    <el-empty description="您没有预约信息" />
                </template>
            </el-table>
    
        </el-card>
    </div>



    <div style="width: 1200px; height: 500px;   margin: 80px auto;">
        <el-card>
            <template #header>已预约记录</template>
            <el-table :data="recordInfoOk" height="400" style="width: 100%">
                <el-table-column prop="id" label="订单编号" width="100" />
                <el-table-column prop="time" label="预约时间" width="120" />
                <el-table-column prop="userName" label="用户名" width="100" />
                <el-table-column prop="styleName" label="妆造风格" width="300" />
                <el-table-column prop="photoName" label="摄影师名称" />
                <el-table-column prop="makeName" label="妆造师名称" />
                <el-table-column prop="state" label="状态" />
                <el-table-column prop="oldTime" label="到店时间"  width="200"/>


                <!-- 空 -->
                <template #empty>
                    <el-empty description="您没有已预约记录信息" />
                </template>
            </el-table>
        </el-card>
    </div>


    <!-- 对话框 -->
    <el-dialog v-model="isDialog" title="请选择到店时间" width="600" style="text-align: center;">

        <!-- 日期选择器 -->
        <el-date-picker v-model="updateInfo.date" type="date" placeholder="请选择日期" :disabled-date="disabledDate" />
        <span>---</span>
        <el-time-select v-model="updateInfo.timeOne" style="width: 240px" :start="startTime" step="01:00" end="16:00"
            placeholder="请选择时间" />

        <template #footer>
            <div>
                <span
                    style="color: #999;font-size: 13px; position: relative;left: -70px;color: red;">温馨提示：请提前一天预约，预约时间10:00-16:00</span>
                <el-button type="success" @click="successClick">一键预约</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref } from 'vue';
import record from '@/api/record'
import { userPiniaInfo } from '@/stores/userPinia';
import router from '@/router';
import { ElMessage } from 'element-plus';
const userInfo = userPiniaInfo();


const isDialog = ref(false)

//按钮颜色
const btnColor = (state) => {
    return state === '未出片' ? 'danger' : 'success';
}

const btnClick = (state) => {
    return state === '未出片' ? true : false;
}

//定义未记录数据模型
const recordInfo = ref([
    //把时间转为字符串就行


])


//定义已记录数据模型
const recordInfoOk = ref([

])

const updateInfo = ref({
    id: '',
    date: '',
    timeOne: '',
    oldTime:''
})

//最终发送对象

const startTime = ref('10:00')

const queryRecordAll = () =>{
    record.getById(userInfo.userInfo.id).then((res) => {
        // recordInfo.value = res.data.data
        recordInfo.value = []
        recordInfoOk.value = []
        res.data.data.forEach(item => {
            if (item.state === '已预约') {
                recordInfoOk.value.push(item)
            } else {
                //没有预约的
                recordInfo.value.push(item)
            }
        });
    })
} 


//来到这个页面就开始查询信息
if (userInfo.userInfo != '') {
    queryRecordAll()
} else {
    ElMessage.error("请登录~")
    router.push("/login")
}


//点击预约按钮 弹出弹出框，选择时间 修改预约表 状态  与时间
const updateState = (id) => {
    isDialog.value = true
    //把当前这条数据赋值给数据模型
    updateInfo.value.id = id
}

function disabledDate(time) {
    return time.getTime() < Date.now();
}

const someDate = new Date();
someDate.setDate(someDate.getDate()); // 将当前日期减去1天
disabledDate(someDate); // 传递修改后的Date对象给函数


const successClick = () => {
    if (updateInfo.value.date != '' && updateInfo.value.date != null && updateInfo.value.timeOne != '' && updateInfo.value.timeOne != null) {
        //把日期转为 字符串  -- 正在写
        console.log(updateInfo.value.date)
        const dateObj = updateInfo.value.date;
        const year = dateObj.getFullYear(); 
        const month = String(dateObj.getMonth() + 1).padStart(2, '0'); 
        const day = String(dateObj.getDate()).padStart(2, '0'); 
        const formattedDate = `${year}-${month}-${day}`; 
        updateInfo.value.oldTime = formattedDate + "-" + updateInfo.value.timeOne

        //发数据去后端
        record.updateOldTime(updateInfo.value).then( (res)=>{
            if(res.data.code === 0){
                queryRecordAll()
                ElMessage.success('预约成功')
            }else{
                ElMessage.error(res.data.message)
            }
            isDialog.value = false
        })
    } else {
        ElMessage.error("拜托~你要选择时间呀")
    }
}

</script>

<style scoped>
#box {
    text-align: center;
    height: auto;
    margin-top: 50px
}
</style>
